<template>
     <el-menu
      :default-active="currentpath"
      class="el-menu-vertical-demo mymenu"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
      :unique-opened="true"
      v-if="userinfo"
      >
      <template v-for="(menu,i) in menus" >
          <template  v-if="userinfo.roleid>=menu.premession">
                <el-menu-item :key="i" v-if="!menu.children " :index="menu.path">
                    <i :class="menu.icon"></i>
                    <span slot="title">{{menu.text}}</span>
                </el-menu-item>
                <el-submenu v-else :key="i" :index="menu.path">
                    <template slot="title" >
                        <i :class="menu.icon"></i>
                        <span>{{menu.text}}</span>
                    </template>
                    <template v-for="(child,k) in menu.children">
                        <el-menu-item 
                            v-if="!child.hide"
                            :key="k"
                            :index="child.path"
                            
                            >
                            <i :class="menu.icon"></i>
                            <span slot="title">{{child.text}}</span>
                        </el-menu-item>
                    </template>
                    
                </el-submenu>
            </template>
      </template>
    </el-menu>
</template>


<script>
import {menus} from "@/utils/menus"
export default {
    props:['userinfo'],
    data(){
        return {
            menus,
            currentpath:this.$route.path,
            
        }
    },
    watch:{
        "$route":function(to,from){
            this.currentpath = to.path;
        }
    },
    methods:{
        handleOpen(){

        },
        handleClose(){

        }
    }
}
</script>

<style lang="scss" scoped>
.mymenu{
    height:100%;
}
</style>
